<template>
    <div>
        <van-cell v-if="!isBoolean" :title="title" :is-link="isLink" :value="value" @click="isLinkClick" />
        <van-cell v-else :title="title">
            <template #right-icon>
                <van-switch size=".24rem" active-color="#EC6938" inactive-color="#B4C1D3" v-model="checked" />
            </template>
        </van-cell>
    </div>
</template>

<script>
    import { mapGetters } from 'vuex';
    import * as DataName from '../../utils/dataName';
    export default {
        props: {
            title: {
                type: String,
                required: true
            },
            value: {
                required: true
            },
            isLink: {
                type: Boolean
            }
        },
        computed: {
            ...mapGetters(['bluetooth']),
            isBoolean({ value }) { return typeof value === 'boolean' },
            checked: {
                get({ value }) {
                    return value
                },
                set(newVal) {
                    switch (this.title) {
                        case DataName.Buzzer:
                            this.bluetooth.setBuzzerIsOpen(newVal)
                            break;
                        case DataName.PressureRouse:
                            this.bluetooth.setPressureRouse(newVal)
                            break;
                        case DataName.NotifyLight:
                            this.bluetooth.setNotifyLight(newVal)
                            break;
                    }
                }
            },
        },
        methods: {
            isLinkClick() {
                if (this.isLink) {
                    this.$emit('openSubmitForm', this.title, this.value)
                }
            }
        }
    }
</script>